<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="//s.kanzhun.com/js/jquery-2.1.0.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>
        .drop {
            border: 1px dotted #dadada;
            height: 50px;
            width: 400px;
            line-height: 50px;
            text-align: center;
            color: #999;
        }
        .drop.enter{
            border: 1px solid #f00;
        }
        .layui-nav li {
            padding-left: 15px;
            cursor: pointer;
            box-sizing: border-box;
            border-bottom: 1px solid #393D49
        }
        .layui-nav li:hover{
           background: #727a92;
           border-bottom: 1px solid #393D49
        }
        .layui-form-item{
            position: relative;
        }
        .layui-icon-delete{
            font-size: 30px;
            position: absolute;
            right: -40px;
            top: 1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="layui-row" style="width: 1000px;margin:0 auto">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
                    <li class="layui-nav-item" draggable="true" ondragstart="drag(event)" id="drag1">开关组件</li>
                    <li class="layui-nav-item" draggable="true" ondragstart="drag(event)" id="drag2">省市联动</li>
                    <li class="layui-nav-item" draggable="true" ondragstart="drag(event)" id="drag3">长输入框</li>
                    <li class="layui-nav-item" draggable="true" ondragstart="drag(event)" id="drag4">文本域</li>
                    <li class="layui-nav-item" draggable="true" ondragstart="drag(event)" id="drag5">单行选择框</li>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs9">
            <div class="grid-demo">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">短输入框</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="addform"></div>
                    <div class="layui-form-item">
                        <button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
                    </div>
                    <div class="drop" id="div1" ondrop="drop(event)" ondragenter="enterDrop(event)" ondragleave="leaveDrop(event)"  ondragover="allowDrop(event)">拖拽组件到这里</div>
                </form>
            </div>
        </div>
    </div>
    <script>
        let arr=[]
        var formInit = function () {
            layui.use('form', function () {
                var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                form.render();
                $(".layui-icon-delete").click(function(){
                 var index=$(".layui-icon-delete").index(this)
                 $(this).closest(".layui-form-item").remove()
                 arr.splice(index,1)
                })
            });
        }
        //初始化
        formInit()
        
        function allowDrop(ev) {
            ev.preventDefault();
           
        }
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        function enterDrop(ev) {
            ev.preventDefault();
            $(".drop").addClass("enter")
        }
        function leaveDrop(ev) {
            ev.preventDefault();
            $(".drop").removeClass("enter")
        }
        function drop(ev) {
            
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            let id = document.getElementById(data).getAttribute("id")
            let html = calculateBonus(`${id}`)
            createHtml(id,html)
        }
        function createHtml(id,html){
            if(arr.length>0){
                let index =arr.indexOf(id)
                if(index>-1){
                    layer.open({
                        type: 1
                        ,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        ,id: 'layerDemo'+2 //防止重复弹出
                        ,content: '<div style="padding: 20px 50px;">不能重复添加组件</div>'
                        ,btn: '知道了'
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,yes: function(){
                           layer.closeAll();
                        }
                     });
                    $(".drop").removeClass("enter")
                       return false
                    }
                    else
                    {
                        arr.push(id)
                        $($(html)[0]).appendTo(".addform")
                        $(".drop").removeClass("enter")
                        formInit()
                    }
            }
            else
            {
                arr.push(id)
                $($(html)[0]).appendTo(".addform")
                $(".drop").removeClass("enter")
                formInit()
            }
        }
        //策略模式
        var template = {
            "drag1": function () {
                return `<div class="layui-form-item" pane="">
                        <label class="layui-form-label">开关-开</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
                        </div>
                        <i class="layui-icon layui-icon-delete"></i>  
                        </div>`
            },
            "drag2": function () {
                return ` <div class="layui-form-item">
                  <label class="layui-form-label">行内选择框</label>
                  <div class="layui-input-inline">
                    <select name="quiz1">
                      <option value="">请选择省</option>
                      <option value="浙江" selected="">浙江省</option>
                      <option value="你的工号">江西省</option>
                      <option value="你最喜欢的老师">福建省</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="quiz2">
                      <option value="">请选择市</option>
                      <option value="杭州">杭州</option>
                      <option value="宁波" disabled="">宁波</option>
                      <option value="温州">温州</option>
                      <option value="温州">台州</option>
                      <option value="温州">绍兴</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="quiz3">
                      <option value="">请选择县/区</option>
                      <option value="西湖区">西湖区</option>
                      <option value="余杭区">余杭区</option>
                      <option value="拱墅区">临安市</option>
                    </select>
                  </div>
                  <i class="layui-icon layui-icon-delete"></i>  
                </div>`
            },
            "drag3": function () {
                return `<div class="layui-form-item">
                    <label class="layui-form-label">长输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required"  autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                    <i class="layui-icon layui-icon-delete"></i>  
                    </div>`
            },
            "drag4": function () {
                return `<div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文本域</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" lay-verify="required"  class="layui-textarea"></textarea>
                        </div>
                        <i class="layui-icon layui-icon-delete"></i>  
                    </div>`
            },
            "drag5": function () {
                return `<div class="layui-form-item">
                        <label class="layui-form-label">单行选择框</label>
                        <div class="layui-input-block">
                            <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">写作</option>
                                <option value="1" selected="">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                            </select>
                            <i class="layui-icon layui-icon-delete"></i>  
                        </div`
            },
        };
        var calculateBonus = function (level) {
            return template[level]();
        };
        $(".layui-nav li").click(function(){
            let id = $(this).attr("id")
            let html = calculateBonus(`${id}`)
            createHtml(id,html)
        })
           
       

    </script>
</body>
</html>